<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue-router.js/vue.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css" >
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<h2>{{address}}</h2>
			<input  type="text"  id="address" v-model="address" />
			<p>{{name}}, {{age}}</p>
			<p>{{hobby}},{{hobby.length}}</p>
			<p>{{hobby[0]}},
			{{hobby[hobby.length-1]}}
			</p>
			<p>
			<span v-for="o in hobby">{{o}} </span>
			</p>
			<p>
				<span v-for="o,i in hobby">{{i+1}}-{{o}}  </span>
			</p>
			<p>{{girl.name}},{{girl.age}}</p>
			<p v-show="girl.age>=18">成年了</p>
			<p v-show="girl.age<18">判三年</p>
			<p v-if="girl.age>=18">成年</p>
			<p v-if="girl.age<18">三年</p>
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=600">三线不差钱</p>
			<p v-else>至上励合</p>
			链接<a v-bind:href=url target="_blank">黄网</a>
			<br>按钮:<button onclick="alert('爱我一次')">点我</button>
			<br>按钮<button @click="show()">点我2</button>
		</div>
	</body>
</html>
	<script type="text/javascript">
		var vm=new Vue({
			el:"#app",
			methods:{
				show:function(){
					console.log("vue show fun")
				}
			},
			data:{
				address:"颐和园",
				name:"白家瑞",
				age:24,
				money:1000,
				url:"http://act.codeboy.com",
				hobby:["红色","绿色","蓝色"],
				girl:{
					name:"肉丝",
					age:14,
				}
			}
		});
	</script>
